<template>
	<view class="box-home-user-un-login">
		<view class="top">
			<p class="title"> 加入会员</p>
			<p class="sub-title">缤纷权益，一触即发</p>
		</view>
		<view class="content">
			<view class="item">
				<view class="left" >
					<image class="img" mode="widthFix" src="@/static/icons/vip.png"></image>
				</view>
				<view class="right">新会员专享20元券</view>
			</view>
			<view class="item">
				<view class="left">
					<image class="img" mode="widthFix" src="@/static/icons/gift.png"></image>
				</view>
				<view class="right">积分兑好礼</view>
			</view>
			<view class="item">
				<view class="left">
					<image class="img" mode="widthFix" src="@/static/icons/award.png"></image>
				</view>
				<view class="right">邀请好友组队赢大奖</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"homeUserUnLogin",
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss"> 
.box-home-user-un-login{
	font-family: PingFangSC-Regula;
	.top{
		margin: 0 auto;
		width: 670upx;
		height: 136upx;		
		background: linear-gradient(141deg, #EDDE5D 0%, #F09819 100%);
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
		border-radius: 12px 12px 0px 0px;
		.title{
			padding-left: 32upx;
			padding-top:22upx;
			text-align: left;
			font-size: 40upx;
			color:#735400;
			font-weight: 500;
		}
		.sub-title{
			padding-left: 32upx;
			text-align: left;
			font-size: 28upx ;
			font-weight:400 ;
			color:#735400;
		}
	}
	.content{
		height: 846upx;
		background-color: #f6f6f6;
		.item{
			display: flex;
			align-items: center;
			padding: 20upx 76upx;
			.left{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 72upx;
				height: 72upx;
				margin-right: 20upx;
				border-radius: 50%;
				background-color: #FFE256;				
				.img{
					max-width: 50upx;
		
				}
			}
			
		}
	}
}

</style>
